<template>
  <v-list v-model:opened="open" :nav="true">
    <template v-for="item in props.menus" :key="item.id">
      <template v-if="!item.hidden">
        <v-list-item v-if="item.menuType==='router'"
                     :key="item.id"
                     :disabled="item.disabled"
                     :prepend-icon="item.icon"
                     :title="item.title"
                     :to="item.path">
        </v-list-item>
        <template v-else-if="item.menuType==='dir'">
          <v-list-item
            v-if="item.disabled"
            :key="item.id"
            :append-icon="'mdi-chevron-down'"
            :disabled="true"
            :prepend-icon="item.icon"
            :title="item.title"
            :to="item.path">
          </v-list-item>
          <v-list-group
            v-else
            :key="item.id as string"
            :value="item.path"
          >
            <template v-slot:activator="{ props }">
              <v-list-item
                :prepend-icon="item.icon"
                :title="item.title"
                v-bind="props"
              ></v-list-item>
            </template>
            <menu-item-list :menus="item.children"/>
          </v-list-group>

        </template>
        <v-list-item v-if="item.menuType==='link'"
                     :key="item.id"
                     :disabled="item.disabled"
                     :href="item.oriURL"
                     :prepend-icon="item.icon"
                     :target="item .target||'_blank'"
                     :title="item.title">
        </v-list-item>
        <v-list-item v-if="item.menuType==='iframe'"
                     :key="item.id"
                     :disabled="item.disabled"
                     :prepend-icon="item.icon"
                     :title="item.title"
                     :to="item.path">
        </v-list-item>
      </template>
    </template>
  </v-list>
</template>
<script lang="ts" setup>
import {ref} from "vue";

const props = withDefaults(defineProps<{ menus: Array<MenuRecordRaw> }>(), {
  menus: () => []
})

const open = ref([])
</script>
<style>

</style>
